<template>
  <div id="home">
    <van-sticky :offset-top="0">
      <form action="/">
        <van-search
          v-model="search"
          show-action
          placeholder="请输入搜索关键词"
          input-align="center"
          shape="round"
          @search="onSearch"
        />
      </form>
    </van-sticky>

    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(banner, index) in banners" :key="index" @click="onBannerClick(index)">
        <img fit="fill" width="100%" height="150px" v-lazy="banner.image_url" />
      </van-swipe-item>
    </van-swipe>

    <van-notice-bar :text="bulletin" mode="closeable" left-icon="volume-o" @click="onClickNoticeBar"></van-notice-bar>

    <van-grid :column-num="4" square clickable>
      <van-grid-item v-for="(category,index) in categorys" :key="index" :icon="category.icon_url" :text="category.name" :to="`/cateGoods/${category.id}/0`" />
    </van-grid>

    <van-divider :style="{color:'red',borderColor:'red'}">品牌制造商</van-divider>
    <div class="wraper">
      <div class="flex">
        <div class="flex-item" v-for="(item,index) in brands" :key="index" @click="onClickBrand(item.id)">
          <van-image fit="fill" width="100px" height="120px" :src="item.list_pic_url" />
          <p>{{item.name}}</p>
          <p style="color:red">{{item.floor_price}}元起</p>
        </div>
      </div>
    </div>

    <van-divider :style="{color:'red',borderColor:'red'}">新品首发</van-divider>
    <van-list>
      <van-card v-for="(item,index) in newGoods" :key="index"
        :desc="item.goods_brief"
        :title="item.name"
        :thumb="item.list_pic_url"
        :origin-price="item.market_price"
        @click="onClickGood(item.id)"
      >
        <template v-slot:price>
          <p style="color: red">￥{{item.retail_price}}</p>
        </template>
      </van-card>
      <van-cell clickable to="/goodsList">
        <template v-slot:title>
          <p style="color: red">更多>></p>
        </template>
      </van-cell>
    </van-list>
    
  </div>
</template>
<style scoped lang="scss">
.wraper{
  width: 100%;
  overflow-x: scroll;
  .flex{
    display: flex;
    flex-flow: row nowrap;
    .flex-item{
      flex: 0 0 100px;
      margin: 2px;
      font-size: 0.7rem;
      line-height: 0.6rem;
    }
  }
}
</style>>
<script lang="ts">
// @ is an alias to /src
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import {
  Form,Search,Swipe,SwipeItem,Lazyload,
  NoticeBar,Grid,GridItem,Divider,Image as VanImage,
  Card,List,Cell,Toast,Sticky
} from 'vant';
import store from '../store/index';
import router from '../router';

Vue.use(Form).use(Search).use(Swipe).use(SwipeItem).use(Lazyload)
.use(NoticeBar).use(Grid).use(GridItem).use(Divider).use(VanImage)
.use(Card).use(List).use(Cell).use(Toast).use(Sticky);

@Component
export default class HomeComponent extends Vue {
  private readonly search: string = '';
  private banners: any[] = [
    'https://img.yzcdn.cn/vant/apple-1.jpg',
    'https://img.yzcdn.cn/vant/apple-2.jpg',
  ];
  private bulletin: string = '';
  private categorys: any[] = [];
  private brands: any[] = [];
  private newGoods: any[] = [];
  
  async created(){
    store.commit('global/setShowPageLoading',true);
    await store.dispatch('banners/getBanners');
    await store.dispatch('bulletin/getBulletin');
    await store.dispatch('category/getCategory');
    await store.dispatch('brands/getBrands');
    await store.dispatch('goods/getNewGoods');
    this.banners=store.getters['banners/banners'].data;
    const bulletins:any=store.getters['bulletin/bulletin'].data;
    for (const b of bulletins){
      this.bulletin += `${b.title}:　${b.content}　　　　　　　　　　　　　`;
    }
    this.categorys=store.getters['category/category'].data;
    this.brands=store.getters['brands/brands'].data;
    this.newGoods=store.getters['goods/newGoods'].data;
    store.commit('global/setShowPageLoading',false);
    
  }

  private onSearch(val: any) {
    console.log(val,this.search);  
  }

  private onBannerClick(index: any){
    console.log(index);
  }

  private onClickNoticeBar(){
    router.push({
      path:`/frame`,
      query:{
        frame_src:'https://blog.csdn.net/qq_40077167/article/details/105550636'
      }
    });
  }

  private onClickBrand(id: string){
    router.push({
      path:`/brand/${id}`
    });
  }

  private onClickGood(id: string){
    router.push({
      path:`/goodDetail/${id}`
    });
  }
}
</script>
